<template>
	<view class="v-root">
		<!-- 使用 common-title 组件 -->
		<common-title :title="healthInfoRef?.title" :showBack="true"></common-title>
		<view class="video-container">

			<video ref="videoPlayer" id="videoPlayer" class="my-video" :src="healthInfoRef.videoUrl"
				@error="videoErrorCallback" controls object-fit="fill" :show-fullscreen-btn="false" show-mute-btn
				:poster="healthInfoRef.imageUrl" :show-center-play-btn="true"></video>
		</view>

	</view>
</template>

<script setup>
	import * as httpConfig from "../../common/http-config.js";
	import * as DataUtils from "../../utils/DataUtils";
	import CommonTitle from '@/components/common-title.vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		onMounted,
		onUnmounted,
		computed,
		defineComponent,
		reactive
	} from 'vue'
	// 使用 onMounted 钩子自动播放视频
	onMounted(() => {
		console.log("组件已经挂载了.......")

	});

	const url = ref("")
	const pageTitle = ref("")
	onLoad((option) => {
		console.log("onLoad..." + option.introduceId)
		healthInfo(option.introduceId)
	})

	const healthInfoRef = ref({})
	// 获取健康宣教
	const healthInfo = async (introduceId) => {
		uni.request({
			url: httpConfig.baseURL + httpConfig.healthInfo, // 请求的 URL
			method: 'POST', // 请求方法为 POST
			data: {
				"introduceId": introduceId

			},
			success: (res) => {
				console.log('healthInfo success', JSON.stringify(res.data));
				if (res.data.code == httpConfig.successCode && !DataUtils.isEmpty(res.data.data)) {
					healthInfoRef.value = res.data.data
				} else {
					uni.showToast({
						title: '数据不存在',
						icon: "error",
						duration: 2000
					});
				}
				// 在这里处理请求成功的情况
			},
			fail: (err) => {
				console.error('healthInfo fail ', err);
				// 在这里处理请求失败的情况
				// 在这里处理请求失败的情况
				uni.showToast({
					title: '数据不存在' + err,
					icon: "error",
					duration: 2000
				});
			}
		});
	};
</script>

<style lang="less" scoped>
	@vw: 8.015vw;
	@vh: 5.4vh;

	.video-container {
		width: 100%;
		height: 450/@vh;
		display: flex;
		flex-direction: row;
		justify-content: center;
		background-color: red;

		.my-video {
			width: 100%;
			height: 450/@vh;
		}
	}


	::v-deep.uni-video-cover-play-button::after {
		content: '\ea24';
		font-size: 40/@vh;
		/* 图标大小 */
		color: #0F6AF8;
		/* 图标颜色 */

	}
</style>